<template>
  <div>
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="数据源">
          <el-select
            v-model="searchForm.dataSourceName"
            placeholder="请选择数据源"
            value-key="name"
            @change="getData(1)"
          >
            <el-option
              v-for="dataSource in dataSourceList"
              :key="dataSource.id"
              :label="dataSource.name"
              :value="dataSource.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="表名">
          <el-input
            v-model="searchForm.fuzzyTableName"
            placeholder="请选输入表名"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getData(1)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="jaguar-table">
      <el-table :data="tableData">
        <el-table-column prop="tableName" label="表名" />
        <el-table-column prop="tableComment" label="表注释" />
        <el-table-column prop="engine" label="引擎" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleGenerate(scope.row)"
              >生成</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="margin-t-20"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="(size) => getData(1, size)"
        @current-change="(current) => getData(current)"
      />
    </div>

    <Generate :dialog="dialog" />
  </div>
</template>
<script>
import { fetchList } from '@/api/codegen'
import { fetchList as fetchDataSourceList } from '@/api/codegen/datasource'

import Generate from './Generate'

export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        id: null,
        operation: null,
        visible: false,
      },
      dataSourceList: [],
    }
  },
  components: {
    Generate,
  },
  created() {
    this.getDataSourceList()
  },
  methods: {
    getDataSourceList() {
      fetchDataSourceList({
        size: 1000,
      }).then((res) => {
        this.dataSourceList = res.data.data.records
      })
    },
    getData(current, size) {
      if (!this.searchForm.dataSourceName) {
        this.$message.warning('请选择数据源')
        return
      }

      if (current) this.page.current = current
      if (size) this.page.size = size

      fetchList(
        Object.assign(
          {
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      ).then((res) => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    handleGenerate(row) {
      this.dialog.visible = true
      this.dialog.tableName = row.tableName
      this.dialog.dataSourceName = this.searchForm.dataSourceName
    },
  },
}
</script>
